<!DOCTYPE html>
<html lang="en" xmlns:th="http://wwww.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>发送接收消息</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style>
        body{
            padding-bottom: 1000px;
        }
        .row div{
            height: 300px;
            /*background: green;*/
            /*border: 1px solid #000;*/
            color: #ffffff;
        }
        .v-align{
            height: 100px;
            /*background: rgba(255,0,0,0.1);*/
            margin: 10px -15px;
        }
        .v-align div{
            height: 60px;
            line-height: 40px;
            /*background: rgba(86, 61, 124, 0.15);*/
            /*border: 1px solid rgba(86, 61, 124, 0.2);*/
            color: #333;
        }
    </style>
</head>
<body>
<body>
<div class="container">
    <div class="row v-align align-items-start">
        <div class="col">
            <div class="form-horizontal">
                <div class="form-group">
                    用户：
                    <input type="input" class="form-control"  name="userName" id="username" placeholder="Name">
                </div>
                <div class="form-group" style="height: 120px">
                    <label>发送的消息</label>
                    <textarea class="form-control" rows="3" name="sendMsg" id="sendMsg" ></textarea>
                </div>

                <button class="btn btn-sm btn-primary" onclick="send()" >
                    发送消息</button>
                <button class="btn btn-sm btn-primary" onclick="wsSend()">
                    websocket发送消息</button>
            </div>
        </div>
        <div class="col" id="receiverDiv">
            <h2>消息</h2>

        </div>
    </div>

</div>
</body>
<script type="text/javascript" src="js/jQ/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</body>
<script type="text/javascript">
    //请求demo 使用链接测试
    //http://127.0.0.1:8100/msg.html?userId=11
    var ws = null;
    var userId = getUrlParam("userId");
    var wsUrl = "ws://localhost:8100/WebSocketServer/"+userId;

    if ('WebSocket' in window) {
        ws = new WebSocket(wsUrl);
    } else {
        alert("当前浏览器不支持WebScoket");
    }
    /**
     *  连接服务器
     * */
    ws.onopen = function () {
        jQuery(".status").css("background", "rgba(0,255,0)");
    };
    /**
     * 收到消息
     * @param event
     */
    ws.onmessage = function (event) {
        setMessage(event.data);
    };
    /**
     *  错误
     * */
    ws.onerror = function (event) {
        setMessage("发生错误" + event)
    }
    ws.onclose = function () {
        setMessage("离开了！")
    }

    function wsSend() {
        console.log("sendMsg="+$("#sendMsg").val());
        let data = {};
        data.sid = $("#username").val();
        data.message = $("#sendMsg").val();
        ws.send(JSON.stringify(data));
    }

    function setMessage(msg) {
        console.log("setMessage=",msg);
        var str = "<div class=\"form-group\" style=\"height: 20px;\">\n" +
            "                <label>"+msg+"</label>\n" +
            "            </div>";

        $("#receiverDiv").append(str);
    }
    function send() {
        console.log("sss");
        console.log("username="+$("#username").val());
        console.log("sendMsg="+$("#sendMsg").val());

        $.ajax({
            url: "/push/"+$("#username").val(),
            type: "post",
            data: {
                "message": $("#sendMsg").val()
            },
            success: function (e) {

            },
            error: function (e) {

            }

        })
    }
</script>

</html>